<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器(五)——class选择器</title>
   
</head>
<body>
    <fieldset>
        <legend>jQuery class选择器示例</legend>
        <form id="userForm">
            用户名：<input type="text" id="userName" class="required"  placeholder="请输入用户名"><br/>
            密码：<input type="password" id="pwd" class="required" placeholder="请输入密码"><br/>
            用户描述：<textarea placeholder="请输入用户描述" rows="5" cols="22" id="desc"></textarea><br/>
            <input type="button" id="btnSave1" value="保存(jQuery方式)">
            <input type="button" id="btnSave2" value="保存(原生JS方式)">
        </form>
    </fieldset>
</body>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
         *      //页面加载完成后的处理，固定写法
         * });
     *
     */
    $(function () {
        //jQuery class选择器的用法：$(".class名称");//固定写法
        //使用jQuery获取id为btn的按钮并绑定点击事件
       $("#btnSave1").on("click",function () {
          var mustInputEleArr = $(".required");//使用jQuery获取使用了required样式的元素，返回的是一个数组，等同于原生js的document.getElementsByClassName("required")这种写法
           console.log("使用jQuery获取使用了required样式的元素");
           console.log(mustInputEleArr);
           $.each(mustInputEleArr,function (i,item) {
               var val = $(item).val();//获取输入框的值
               //判断输入框的值是否为空
               if(val==""){
               		//改变样式
                   $(item).css({
                       "background-color":"#FFFF00",
                       "border":"1px solid #FF000"
                   });
                   var msg = $(item).attr("placeholder");//使用jQuery提供的attr("属性名")方法获取元素的placeholder属性值
                   alert(msg);
                   return false;//退出循环
               }
           });
       });
    });

    /**
     * 原生js写法
     */
    window.onload= function () {
        var btn = document.getElementById("btnSave2");
        btn.onclick=function () {
            var mustInputEleArr = document.getElementsByClassName("required");//获取使用了required样式的元素
            console.log("使用原生js获取使用了required样式的元素");
            console.log(mustInputEleArr);
            for(var i=0;i<mustInputEleArr.length;i++){
                var inputEle = mustInputEleArr[i];
                var val = inputEle.value;//获取输入框的值
                if(val==""){
                    inputEle.style.backgroundColor="#FFFF00";
                    inputEle.style.border="1px solid #FF000";
                    var msg = inputEle.placeholder;//获取元素的placeholder属性值
                    alert(msg);
                    break;//退出循环
                }
            }
        };
    }
</script>
</html>